<template>
  <div>
    <div>
      <selector
      :data="options"
      @select-change="setTargetIndex"
      >
      </selector>
    </div>
    <div class="transfer">
      <div class="box left-list">
        <list-title :title="leftTitle">{{ leftTitle }}</list-title>
        <div>
          <div
            v-for="item of leftListData"
            :key="item.id"
            :class="['list-item', item.disabled ? 'disabled' : '']"
          >
            <input 
              type="checkbox"
              :disabled="item.disabled"
              :id="'__checkbox__'+item.id"
              @click="setCheckedData($event.target.checked,'left',item)"
              />
              <label for="'__checkbox__'+item.id">{{ item.phone_name}}</label>
          </div>
        </div>
      </div>
      <div class="box button-group">
        <button
        :disabled="transferButtonDisabled.left"
        @click="removeRightListData(checkedData.right)">&lt;</button>
        <button
        :disabled="transferButtonDisabled.right"
        @click="addRightListData(checkedData.left)"
        >&gt;</button>
      </div>
      <div class="box right-list">
        <list-title :title="rightTitle"> </list-title>
          <div>
          <div
            v-for="item of rightListData"
            :key="item.id"
            :class="['list-item', item.disabled ? 'disabled' : '']"
          >
            <input 
              type="checkbox"
              :disabled="item.disabled"
              :id="'__checkbox__'+item.id"
              @click="setCheckedData($event.target.checked,'right',item)"
              />
              <label for="'__checkbox__'+item.id">{{ item.phone_name}}</label>
          </div>
        </div>
      </div>

    </div>
  </div>
  
</template>
<script setup>
import Selector from './components/Selector.vue'
import ListTitle from './components/ListTitle.vue'
import propsDefination from './extends/props.js'
import {useTargetIndex, useComputedData, useRightListData,useCheckedBox} from './extends/hooks.js'

const props = defineProps(propsDefination)
const options = props.data.map(({title}) => title)

const [targetIndex, setTargetIndex] = useTargetIndex(0)

const [checkedData, addCheckedData, removeCheckedData] = useCheckedBox()

const [rightListData, addRightListData, removeRightListData] = useRightListData([],checkedData)


const {leftTitle, leftListData,transferButtonDisabled} = useComputedData(props.data, targetIndex, rightListData,checkedData)

const setCheckedData = (checked, leftOrRight, item) => {
  checked
    ? addCheckedData(leftOrRight, item)
     : removeCheckedData(leftOrRight, item.id)
}

</script>
<style lang="scss" scoped>
.transfer{
  display: flex;
 flex-direction: row;
 width: 300px;
 height: 300px;
 border: 1px solid #ddd;
 .box{
  width:120px;
  height: 100%;
  
  .list-item{
    display: flex;
    align-items: center;
    height: 30px;
    font-size: 12px;
    color: #666;
    &.disabled{
      opacity: .6;
    }
  }
  &.button-group{
    display: flex;
    justify-content: center;
    align-items: center;
    border-left:1px solid #ddd;
    border-right:1px solid #ddd;
    button{
      width: 38px;
      height: 38px;
      border: none;
      outline: none;
      border-radius: 5px;
      background-color: orange;
      color: #fff;
      &:disabled{
        opacity: .6;
      }
      &:nth-child(2){
        margin-left:10px;
      }
      &:hover{
        cursor: pointer;
      }
    }
  }
 }
}

</style>